<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    正在测试jq的ajax方法
    <button id="btn1">默认使用</button>
    <button id="btn2">发数据的ajax</button>
    <button id="btn3">超时的ajax</button>
    <button id="btn4">jsonp跨域的ajax</button>
    <button id="btn5">有loading的ajax</button>
    <button id="btn6">不会触发生命周期的ajax</button>
</body>
<script src="../jquery.js"></script>
<script>
    // $.ajax("./data/data.php", {
    //     type:"get",
    //     data:{},
    //     succes:function(){},
    //     error:function(){},
    //     // .....
    // })

    // jq的ajax的常用的配置选项
    // $.ajax({
    //     url:"./data/data.php",
    //     type:"get",
    //     data:{
    //         username:"admin"
    //     },
    //     success:()=>{},
    //     error:()=>{},
    //     beforeSend:()=>{},
    //     dataType:"",
    //     jsonp:"",
    //     timeout:1000,
    //     global:true
    // })
    $("#btn1").click(function(){
        var a = $.ajax({
            url:"./data/data.php",
            success:(res, state, xhr)=>{
                console.log(res)
                console.log(state)
                console.log(xhr)
            }
        })
        console.log(a)
    })

    $("#btn2").click(function(){
        $.ajax({
            url:"./data/data.php",
            data:{
                username:"admin",
                password:"1123242"
            },
            success:(res, state, xhr)=>{
                console.log(res)
            }
        })
    })

    $("#btn3").click(function(){
        $.ajax({
            url:"./data/data.php",
            data:{
                username:"admin",
                password:"1123242"
            },
            success:(res, state, xhr)=>{
                console.log(res)
            },
            error:(xhr, state, res)=>{
                console.log(state)
            },
            timeout:10
        })
    })

    $("#btn4").click(function(){
        $.ajax({
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
            data:{
                wd:"上海"
            },
            jsonp:"cb",
            dataType:"jsonp",
            success:(res, state, xhr)=>{
                console.log(res)
            }
        })
    })

    $("#btn5").click(function(){
        $.ajax({
            url:"./data/data.php",
            success:(res, state, xhr)=>{
                console.log(res)
                $(".loading").hide()
            },
            beforeSend:()=>{
                $("<img class='loading'>").attr("src","./loading.jpg").appendTo($("body"))
            }
        })
    })


    // ajax的生命周期函数（ajax的全局函数）

    $(document).ajaxStop(function(){
        alert("ajaxStop")
    })
    $(document).ajaxSend(function(){
        alert("ajaxSend")
    })
    $(document).ajaxStart(function(){
        alert("ajaxStart")
    })
    $(document).ajaxComplete(function(){
        alert("ajaxComplete")
    })
    $(document).ajaxError(function(){
        alert("ajaxError")
    })
    $(document).ajaxSuccess(function(){
        alert("ajaxSuccess")
    })


    $("#btn6").click(function(){
        $.ajax({
            url:"./data/data.php",
            success:(res, state, xhr)=>{
                console.log(res)
            },
            global:false
        })
    })
</script>
</html>